<template>
	<view v-show="show">
		<view class='pop-show' />
		<view class='content'>
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="list" @click="radioChange" v-bind:id="index">
					<image :src="selectIndex==index?'../../static/ic_check.png'
					:'../../static/ic_uncheck.png'" />
					<text>{{type=="1"?(item.areaName+ item.floor+item.layer):item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["list", "show", "selectIndex","type"],
		data() {
			return {

			};
		},
		methods: {
			radioChange: function(e) {
				console.log(e);
				let index = e.currentTarget.id;
				this.selectIndex = parseInt(index);
				let type = this.type;
				let value =this.list[index].name;
				console.log(type);
				if(type=="1"){
					value= this.list[index].areaName+ this.list[index].floor+this.list[index].layer;
				}
				let param = {
					"index": this.selectIndex,
					"value": value,
					"type":type
				}
				this.$emit("choose", param);
			}
		}
	}
</script>

<style>
	.pop-show {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		height: 100%;
		flex-direction: column;
		background-color: black;
		opacity: 0.3;
	}

	.content {
		border-radius: 8upx;
		width: 80%;
		max-height: 800upx;
		position: absolute;
		left: 10%;
		top: 188upx;
		z-index: 100;
		flex-direction: column;
		background-color: white;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		margin: 40upx 10%;

	}

	.list-item .list {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-item image {
		width: 50upx;
		height: 50upx;
	}

	.list-item text {
		font-size: 32upx;
		color: #333333;
		margin-left: 20upx;
	}
</style>
